<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <title>操作管理</title>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
</head>

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-size: 12px;
    }

    div {
        -moz-box-sizing: border-box; /*Firefox3.5+*/
        -webkit-box-sizing: border-box; /*Safari3.2+*/
        -o-box-sizing: border-box; /*Opera9.6*/
        -ms-box-sizing: border-box; /*IE8*/
        box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
    }


    .x-nav {
        padding: 0 20px;
        position: relative;
        z-index: 99;
        line-height: 39px;
        border-bottom: 1px solid #e5e5e5;
        height: 39px;
        overflow: hidden;
    }

    .layui-btn-xstree {
        height: 35px;
        line-height: 35px;
        padding: 0px 5px;
        font-size: 12px;
    }

    .layui-table-body {
        overflow-x: hidden;
    }

    /* 去掉表格内容超出的提示*/
    .layui-table-tips-main {
        display: none
    }

    .layui-table-tips-c {
        display: none
    }

    .layui-table-grid-down {
        display: none
    }

    .layui-table-view .layui-table {
        width: 100%
    }
</style>

<body class="animated fadeIn">

<div class="page-loading">
    <div class="rubik-loader"></div>
</div>

<div style="height: 100%">
    <div style="height: 100%">
        <div style="padding: 20px; background-color: #F2F2F2;height: 100%;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">菜单树</div>
                        <div class="layui-card-body" id="toolbarDiv">
                            <ul id="menuTree" class="dtree" data-id="0"></ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md9">
                    <div class="layui-card">
                        <div class="layui-card-header" id="card-header">操作列表</div>
                        <div class="layui-card-body">
                            <table class="layui-hide" id="operator-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbar">
    <shiro:hasPermission name="operator:add">
        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add" style="display: none">
            <i class="zadmin-icon zadmin-icon-xinzeng zadmin-oper-area"> 新增</i>
        </button>
    </shiro:hasPermission>
</script>

<script type="text/html" id="column-toolbar">

    <shiro:hasPermission name="operator:update">
        <a lay-event="edit">
            <i class="zadmin-icon zadmin-icon-edit-square zadmin-oper-area zadmin-blue" title="编辑"></i>
        </a>
    </shiro:hasPermission>

    <shiro:hasPermission name="operator:delete">
        <a lay-event="del">
            <i class="zadmin-icon zadmin-icon-delete zadmin-oper-area zadmin-red" title="删除"></i>
        </a>
    </shiro:hasPermission>

    <shiro:lacksPermission name="operator:delete, operator:delete">
        <i class="zadmin-icon zadmin-icon-wuquanxian zadmin-oper-area zadmin-red"></i>无权限
    </shiro:lacksPermission>

</script>


<script th:src="@{/lib/jquery/jquery.min.js}"></script>
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:src="@{/js/common.js}"></script>

<script>

    var parentMenuId = 0;
    var parentMenuIsLeaf = false;

    // 获取有没有删除, 更新, 和新增的权限.
    var hasOperatorDelete = false;
    var hasOperatorUpdate = false;
    var hasOperatorAdd = false;

    $.get('/security/hasPermission/operator:update', function (data) {
        hasOperatorUpdate = data.data;
    });
    $.get('/security/hasPermission/operator:delete', function (data) {
        hasOperatorDelete = data.data;
    });
    $.get('/security/hasPermission/operator:add', function (data) {
        hasOperatorAdd = data.data;
    });

    layui.config({
        base: '/lib/layui/extend/'
    }).use(['jquery', 'dtree', 'layer', 'table', 'element'], function () {
        var dtree = layui.dtree;
        var layer = layui.layer;
        var table = layui.table;

        var DTree = dtree.render({
            elem: "#menuTree",
            url: "/menu/tree/root/operator",
            dataStyle: "layuiStyle",
            initLevel: 5,   // 初始打开节点级别
            method: "GET",
            dot: false,     // 圆点是否显示
            toolbar: true,  // 右键工具栏
            menubar: true,  // 树上方工具栏, 展开、收缩、刷新、搜索等
            toolbarShow: [],
            toolbarScroll: "#toolbarDiv",
            toolbarExt: [
                {
                    toolbarId: "add",
                    icon: "dtree-icon-roundadd",
                    title: "添加操作点",
                    handler: function (node, $div) {
                        addOperator(node.nodeId);
                    }
                },
                {
                    toolbarId: "edit",
                    icon: "dtree-icon-bianji",
                    title: "编辑",
                    handler: function (node, $div) {
                        editMenu(node.nodeId);
                    }
                },
                {
                    toolbarId: "remove",
                    icon: "dtree-icon-roundclose",
                    title: "删除",
                    handler: function (node, $div) {
                        delMenu(node.nodeId);
                    }
                }
            ],
            response: {
                statusName: "status",
                statusCode: 0,
                message: "message",
                treeId: "menuId",
                parentId: "parentId",
                title: "menuName"
            },
            toolbarFun: {
                loadToolbarBefore: function (buttons, param, $div) {
                    if (!param.leaf) { // 只有叶子节点, 即页面, 才能添加页面的功能权限.
                        buttons.add = "";
                    }
                    if (!hasOperatorAdd) {
                        buttons.add = "";
                    }
                    if (!hasOperatorDelete) {
                        buttons.remove = "";
                    }
                    if (!hasOperatorUpdate) {
                        buttons.edit = "";
                    }
                    return buttons; // 将按钮对象返回
                }
            }
        });

        table.render({
            elem: '#operator-table'
            , url: '/operator/list'
            , where: {
                menuId: 0
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "data": res.data //解析数据列表
                };
            }
            , cellMinWidth: 80
            , toolbar: '#toolbar'
            , cols: [
                [
                    {type: 'numbers', title: '序号', width: "5%"}
                    , {field: 'operatorId', title: 'ID', hide: true}
                    , {field: 'operatorName', title: '功能名称', width: "15%"}
                    , {field: 'url', title: '地址', width: "25%"}
                    , {field: 'httpMethod', title: '请求方法', width: "10%"}
                    , {field: 'perms', title: '权限标识符', width: "18%"}
                    , {title: '操作', fixed: 'right', align: 'center', toolbar: '#column-toolbar'}
                ]
            ],
            done: function (res, curr, count) {
                if (parentMenuIsLeaf) {
                    $("button[lay-event='add']").show();
                } else {
                    $("button[lay-event='add']").hide();
                }
            }
        });

        dtree.on("node('menuTree')", function (obj) {
            if (obj.param.leaf) {
                parentMenuId = obj.param.nodeId;
                parentMenuIsLeaf = true;
            } else {
                parentMenuId = 0;
                parentMenuIsLeaf = false;
            }

            table.reload('operator-table', {
                where: {
                    menuId: obj.param.nodeId
                }
            });
        });

        table.on('toolbar', function (obj) {
            var event = obj.event;
            if (event === 'add') {
                addOperator(parentMenuId);
            }
        });

        table.on('tool', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                editOperator(data.operatorId);
            } else if (obj.event === "del") {
                delOperator(obj.data.operatorId);
            }
        });

        function delMenu(id) {
            layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除！", {icon: 3, title: '提示'},
                function (index) {
                    $.post('/menu/' + id, {_method: "DELETE"}, function (data) {
                        layer.close(index);
                        handlerResult(data, function () {
                            refresh();
                        });
                    });
                }, function (index) {
                    layer.close(index);
                }
            );
        }

        function delOperator(id) {
            layer.confirm("是否确定删除?", {icon: 3, title: '提示'},
                function (index) {
                    $.post('/operator/' + id, {_method: "DELETE"}, function (data) {
                        layer.close(index);
                        handlerResult(data, function () {
                            layer.msg("删除成功", {icon: 6});
                            refresh();
                        });
                    });
                }, function (index) {
                    layer.close(index);
                }
            );
        }

        function refresh() {
            table.reload("operator-table");
            DTree.menubarMethod().refreshTree();
        }

        function addOperator(menuId) {
            layer.open({
                content: "/operator?menuId=" + menuId,
                title: "添加操作点",
                area: ['40%', '85%'],
                type: 2,
                maxmin: true,
                shadeClose: true,
                end: function () {
                    refresh();
                }
            });
        }

        function editMenu(id) {
            layer.open({
                content: '/menu/' + id,
                title: "编辑",
                area: ['40%', '85%'],
                type: 2,
                maxmin: true,
                shadeClose: true,
                end: function () {
                    DTree.menubarMethod().refreshTree();
                }
            });
        }

        function editOperator(id) {
            layer.open({
                content: '/operator/' + id,
                title: "编辑",
                area: ['40%', '85%'],
                type: 2,
                maxmin: true,
                shadeClose: true,
                end: function () {
                    table.reload("operator-table");
                }
            });
        }
    });
</script>
</body>

</html>